<script setup>
import { ref, onMounted } from 'vue';
import { useToolsStore } from '@/store/tools'
import { useCommonStore } from '@/store/common'	
import { RouterView, useRoute} from 'vue-router'
import Left from '@/components/tools/Left.vue'
import { debounce } from '@/utils/common'

const route = useRoute()
//tools store
const toolsStore = useToolsStore()
//common store
const commonStore = useCommonStore()

const activeCateId = ref("1")
const drawerOpen = ref(false)

//根据滚动条自动激活左侧导航栏
const handleScroll = (e) => {
	if (route.path != '/tools') {
		return
	}
	let scrollTop = e.target.scrollTop // 滚动条偏移量
	//console.log(scrollTop)
	let _activeId = 1;
	for (let n = 1; n <= toolsStore.toolsCate.length; n++) {
	  if(document.querySelector("#cate_" + n)?.offsetTop < scrollTop + 120){
		_activeId = n;
	  }
	}
	activeCateId.value = _activeId.toString()
}
//防抖
const debounceScroll = debounce(handleScroll, 200)

onMounted(()=>{
})

</script>

<template>
	<el-container class="tools-container">
		<el-aside>
			<Left :active-cate-id="activeCateId"></Left>
		</el-aside>
		<el-main class="tools-main bg-white-soft" @scroll = "debounceScroll">
			<router-view v-slot="{ Component, route }">
			  <transition name="animation" mode="out-in">
			    <component :is="Component" :key="route.path"></component>
			  </transition>
			</router-view>
		</el-main>
	</el-container>
</template>

<style>
.el-aside{
	 width: auto;
	 height: 100%;
	 border-right: 1px solid var(--color-border);
}
.tools-container{
	height: 100%;
}
.tools-main{
	padding: 0 20px;
}
/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
	transform: translateX(20px);
	opacity: 0;
}
.animation-enter-to,
.animation-leave-from {
	opacity: 1;
}
.animation-enter-active {
	transition: all 0.7s ease;
}
.animation-leave-active {
	transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>